<template>
	<view class="wrapper">
		<Item
			:active="pickedIndex === 1"
			:name="isToday('周一')"
			:icon="week1icon"
			@tap="onPick(1)"
		></Item>
		<Item
			:active="pickedIndex === 2"
			:name="isToday('周二')"
			:icon="week2icon"
			@tap="onPick(2)"
		></Item>
		<Item
			:active="pickedIndex === 3"
			:name="isToday('周三')"
			:icon="week3icon"
			@tap="onPick(3)"
		></Item>
		<Item
			:active="pickedIndex === 4"
			:name="isToday('周四')"
			:icon="week4icon"
			@tap="onPick(4)"
		></Item>
		<Item
			:active="pickedIndex === 5"
			:name="isToday('周五')"
			:icon="week5icon"
			@tap="onPick(5)"
		></Item>
		<Item
			:active="pickedIndex === 6"
			:name="isToday('周六')"
			:icon="week6icon"
			@tap="onPick(6)"
		></Item>
		<Item
			:active="pickedIndex === 7"
			:name="isToday('周日')"
			:icon="week7icon"
			@tap="onPick(7)"
		></Item>
		<!-- <Item name="下周" :icon="weeknexticon"></Item> -->
	</view>
</template>

<script setup>
import Item from './Item.vue';
import week1icon from '../../static/icons/weeks_1.png';
import week2icon from '../../static/icons/weeks_2.png';
import week3icon from '../../static/icons/weeks_3.png';
import week4icon from '../../static/icons/weeks_4.png';
import week5icon from '../../static/icons/weeks_5.png';
import week6icon from '../../static/icons/weeks_6.png';
import week7icon from '../../static/icons/weeks_7.png';

import { ref } from 'vue';
import dayjs from 'dayjs';
import { getThisWeekDates } from '../../utils/date.utils.js';

const mode = defineModel();
const $emits = defineEmits(['pick']);

// 0: 周日，1: 周一，2: 周二，3: 周三，4: 周四，5: 周五，6: 周六
const dayOfWeek = dayjs().day();
const pickedIndex = ref(dayjs().day());
const weekDateList = getThisWeekDates();

const onPick = (weekDayIndex) => {
	pickedIndex.value = weekDayIndex;
	const date = weekDateList[weekDayIndex - 1];
	console.log('date', date);
	mode.value = date;
	// console.log('date', date);
	$emits('pick', date);
};

// 显示"周三"或"今日"
function isToday(week) {
	const map = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
	if (map[dayOfWeek] === week) return '今日';
	return week;
}
</script>

<style scoped></style>
